<template>
  <div style="margin-top: 20px">
    <el-date-picker
      v-model="date"
      type="daterange"
      range-separator="To"
      start-placeholder="Start date"
      end-placeholder="End date"
      size="large"
      @change="handleHalfYearChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import dayjs from "dayjs";

import { ref } from "vue";
const date = ref(null);
const handleHalfYearChange = (value: any) => {
  if (value && value.length > 0) {
    const start = dayjs(value[0]);
    const end = dayjs(value[1]);
    if (end.year() === start.year()) {
      if (
        end.month() + 1 - (start.month() + 1) > 6 ||
        (end.month() + 1 - (start.month() + 1) == 6 &&
          end.date() > start.date())
      ) {
        ElMessage({
          message: "最多不能超过半年！",
          type: "error",
        });
        date.value = null;
      }
    } else {
      if (
        end.month() +
          1 +
          12 * (end.year() - start.year()) -
          (start.month() + 1) >
          6 ||
        (end.month() +
          1 +
          12 * (end.year() - start.year()) -
          (start.month() + 1) ==
          6 &&
          end.date() > start.date())
      ) {
        ElMessage({
          message: "最多不能超过半年！",
          type: "error",
        });
        date.value = null;
      }
    }
  }
};
</script>
<style lang="scss" scoped></style>
